<template>
  <div>
    <photo-view :list="list" @close="close"/>
    <el-scrollbar :height="height" ref="scrollbarRef">
      <el-form :model="form">
        <el-row style="margin-bottom: 5px">
          <el-col :span="22">
            <p class="pinformation">方法原理描述</p>
          </el-col>
        </el-row>
        <div style="font-size: 14px; margin-left: 10px; margin-bottom: 20px">
          {{ form.methodYl || "/" }}
        </div>
        <el-row style="margin-bottom: 5px; margin-top: 10px">
          <p class="pinformation">方法原理截图</p>
          <p class="totalStyle">共 {{ form.ylFileList.length }} 条数据</p>
          <el-table
            class="business"
            :data="form.ylFileList"
            border
            ref="ylTableRef"
          >
            <el-table-column
              label="截图编号"
              align="center"
              prop="fileCode"
              width="220"
            />
            <el-table-column label="截图名称" align="center">
              <template #default="scope">
                <span
                  @click="list = scope.row.fileList"
                  class="fileNameHover"
                  >{{ scope.row.fileMc }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
        
        <!-- 分析步骤描述 -->
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <el-col :span="22">
            <p class="pinformation">干扰及清除描述</p>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <div style="font-size: 14px; margin-left: 10px; margin-bottom: 20px">
            {{ form.methodClear || "/" }}
          </div>
        </el-row>
  
        <el-row style="margin-bottom: 5px; margin-top: 5px">
            <p class="pinformation">干扰及清除截图</p>
            <p class="totalStyle">共 {{ form.grFileList.length }} 条数据</p>
          <el-table
            class="business"
            ref="interTableRef"
            :data="form.grFileList"
            border
          >
            <el-table-column
              label="截图编号"
              align="center"
              prop="fileCode"
              width="220"
            />
            <el-table-column label="截图名称" align="center">
              <template #default="scope">
                <span
                  @click="list = scope.row.fileList"
                  class="fileNameHover"
                  >{{ scope.row.fileMc }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
  
        <!-- 分析步骤描述 -->
        <el-row style="margin-bottom: 5px; margin-top: 5px">
          <el-col :span="22">
            <p class="pinformation">试剂材料描述</p>
          </el-col>
        </el-row>
        <el-row style="margin-bottom: 5px">
          <div style="font-size: 14px; margin-left: 10px; margin-bottom: 20px">
            {{ form.methodReagent || "/" }}
          </div>
        </el-row>
  
        <el-row style="margin-bottom: 5px; margin-top: 5px">
            <p class="pinformation">试剂材料截图</p>
            <p class="totalStyle">共 {{ form.clFileList.length }} 条数据</p>
          <el-table
            class="business"
            :data="form.clFileList"
            border
            ref="materialTableRef"
          >
            <el-table-column
              label="截图编号"
              align="center"
              prop="fileCode"
              width="220"
            />
            <el-table-column label="截图名称" align="center">
              <template #default="scope">
                <span
                  @click="list = scope.row.fileList"
                  class="fileNameHover"
                  >{{ scope.row.fileMc }}</span
                >
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-form>
    </el-scrollbar>
  </div>
</template>

<script setup>
import useMethodStore from "@/store/modules/method";

const methodStore = useMethodStore();
const methodId = computed(() => methodStore.methodId);
const YlAndReagent = computed(() => methodStore.YlAndReagent);
const list = ref([])

const { proxy } = getCurrentInstance();
const data = reactive({
  form: { ylFileList: [], clFileList: [], grFileList: [] },
});

const { form } = toRefs(data);

function close() {
  list.value = []
}

watch(YlAndReagent, () => {
  form.value = YlAndReagent.value;
});

const height = ref();

function getHeight() {
  nextTick(() => {
    height.value = proxy.getSubFileHeight(proxy, "scrollbarRef");
  });
}

onMounted(() => {
  nextTick(function () {
    getHeight();
    window.addEventListener("resize", getHeight);
  })
})

onUpdated(() => {
  getHeight()
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", getHeight);
});
</script>
